﻿<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>确认购物清单 - 安阳师范网购系统！</title>
<link type="text/css" href="<%=basePath%>/mallstyle/css/header.css"
	rel="stylesheet" />
<link type="text/css" href="<%=basePath%>/mallstyle/css/main.css"
	rel="stylesheet" />
<link type="text/css" href="<%=basePath%>/mallstyle/css/footer.css"
	rel="stylesheet" />
<link type="text/css" href="<%=basePath%>/mallstyle/css/qq.css"
	rel="stylesheet" />
<script type="text/javascript" src="<%=basePath%>/mallstyle/js/index.js"></script>
<script type="text/javascript"
	src="<%=basePath%>/mallstyle/js/jquery.js" charset="utf-8"></script>
<script type="text/javascript"
	src="<%=basePath%>/mallstyle/js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=basePath%>/mallstyle/js/cart.js"
	charset="utf-8"></script>
<script type="text/javascript" src="<%=basePath%>/mallstyle/js/main.js"
	charset="utf-8"></script>
<script type="text/javascript" src="<%=basePath%>/mallstyle/js/qq.js"
	charset="utf-8"></script>
<script type="text/javascript" src="<%=basePath%>/mallstyle/js/kissy.js"></script>
<script type="text/javascript"
	src="<%=basePath%>/mallstyle/js/switchable-pkg.js"></script>
<!--[if lte IE 6]>
<script type="text/javascript" language="Javascript" src="<%=basePath%>/mallstyle/js/hoverforie6.js"></script>
<![endif]-->
<!--<editmode></editmode>-->
</head>

<body>
	<%@include file="../../../nav.jsp"%>
	<%@include file="../../../header.jsp"%>
	<div id="main" class="w-full">
		<div id="page-cart" class="cart-empty w">
			<div class="step step1 mt10 clearfix">
				<span class="fs14 strong fff">1.查看购物车</span> <span
					class="fs14 strong">2.确认订单信息</span> <span class="fs14 strong">3.付款</span>
				<span class="fs14 strong">4.确认收货</span> <span class="fs14 strong">5.评价</span>
			</div>
			<c:if test="${empty carList }">
				<div class="empty-notice w clearfix">
					<div class="empty-ico"></div>
					<div class="empty-text">
						<p class="fs14 strong">您的购物车是空的，您可以</p>
						<a href="../../index.jsp">选购商品>></a> <a
							href="<%=path%>/rest/orderform/myOrder">查看订单>></a>
					</div>
				</div>
			</c:if>
			<c:if test="${not empty carList }">
				<div class="cartbox w mt20 mb10">
					<div class="amount"></div>
					<div class="title clearfix mb10">
						<span class="sellect-all">选择</span> <span class="col-desc">商家商品</span>
						<span>价格</span> <span>数量</span> <span>小计</span> <span>操作</span>
					</div>
					<div class="content">
						<div class="store-each">
							<div class="store-name pb10">
								商家：<a href="#">安阳师范旗舰店</a>
							</div>
							<c:forEach items="${carList }" var="carList">
								<dl class="goods-each clearfix" id="cart_item_66482">
									<dd class="select" id="checkboxId">
										<input checked="checked" type="checkbox" name="checkboxBtn"
											value="${carList.carId}" />
									</dd>
									<dd class="pic">
										<a class="block" href="#" target="_blank"><img
											src="data/files/store_2/goods_196/small_201605241016363460.png"
											alt="优资莱  绿茶籽精华滋养水" width="48" height="48" /></a>
									</dd>
									<dd class="desc">
										<p>
											<a href="#" target="_blank">优资莱 绿茶籽精华滋养水</a>
										</p>
									</dd>

									<dd class="price"  id="price">${carList.goods.gPrice}</dd>
									<dd class="quantity">
										<img
											src="http://www.999000.cn/themes/mall/default/styles/default/images/subtract.gif"
											onclick="decrease_quantity();" alt="减少" width="11"
											height="11" id="dec${carList.carId}" class="decImg" /> <input
											class="input" id="${carList.carId}Count" value="${carList.carCount}" onkeyup="change_quantity();" type="text" /> <img
											src="http://www.999000.cn/themes/mall/default/styles/default/images/adding.gif"
											onclick="add_quantity();" alt="增加" width="11"
											id="add${carList.carId}" height="11" class="addImg" />
									</dd>
									<dd class="subtotal fs14 strong"  id="${carList.carId}subtotal">
										${carList.goods.gPrice}</dd>
									<dd class="handle">
										<a class="move" href="javascript:;"
											onclick="move_favorite(2, 66482, 3495);">加入收藏夹</a> <br /> <a
											class="del"
											href="<%=path%>/rest/cart/deleteThis?carid=${carList.carId}"
											onclick="">删除</a>
									</dd>
								</dl>
							</c:forEach>
							<div class="cart-amount mt20 w auto mb10 clearfix">
								<div class="btn-amount">
									<p>
										<a href="<%=path%>/index.jsp" class="inline-block back center">继续购物</a>
										<span class="ml20">商品总价：</span> 
										<span class="price fs14 strong mr20"  id="allPrice">  </span> 
										<a href="javascript:jiesuan();" id="jiesuan"  class="inline-block btn fs14 center fff strong">填写并确认订单</a>
									</p>
									<form id="jieSuanForm" action="<%=path%>/rest/orderform/addOrderform" method="post">
		                                   <input type="hidden" name="cartItemIds" id="cartItemIds"/>
		                                   <input type="hidden" name="total"  id="hiddenTotal"/>
	                                </form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</c:if>

			<div class="interest mt20 mb10">
				<div class="title border fs14 padding5 f66 strong">
					<span class="arr"></span>你可能感兴趣的商品
				</div>
				<div class="content border border-t-0 clearfix">
					<dl class="float-left">
						<dt>
							<a href="#" ><img width="160" height="160"
								src="<%=basePath%>/mallstyle/picture/small_201605241016363460.png" /></a>
						</dt>
						<dd class="desc">
							<a href="#" >优资莱 绿茶籽精华滋养水</a>
						</dd>
						<dd class="price clearfix">
							<em>319.00</em> <span>最新成交7417笔</span>
						</dd>
						<dd class="service"></dd>
					</dl>
					<dl class="float-left">
						<dt>
							<a href="#" ><img width="160" height="160"
								src="<%=basePath%>/mallstyle/picture/small_201605241016594128.png" /></a>
						</dt>
						<dd class="desc">
							<a href="#" >优资莱 绿茶籽精华滋养洁面乳</a>
						</dd>
						<dd class="price clearfix">
							<em>199.00</em> <span>最新成交6422笔</span>
						</dd>
						<dd class="service"></dd>
					</dl>
					<dl class="float-left">
						<dt>
							<a href="#" ><img width="160" height="160"
								src="<%=basePath%>/mallstyle/picture/small_201607041804567701.jpg" /></a>
						</dt>
						<dd class="desc">
							<a href="#" >优资莱 无瑕净白多效BB霜</a>
						</dd>
						<dd class="price clearfix">
							<em>369.00</em> <span>最新成交3529笔</span>
						</dd>
						<dd class="service"></dd>
					</dl>
					<dl class="float-left">
						<dt>
							<a href="#" ><img width="160" height="160"
								src="<%=basePath%>/mallstyle/picture/small_201605241015035679.png" /></a>
						</dt>
						<dd class="desc">
							<a href="#" >优资莱 绿茶籽精华滋养乳</a>
						</dd>
						<dd class="price clearfix">
							<em>319.00</em> <span>最新成交6316笔</span>
						</dd>
						<dd class="service"></dd>
					</dl>
					<dl class="float-left">
						<dt>
							<a href="#" ><img width="160" height="160"
								src="<%=basePath%>/mallstyle/picture/small_201605241014394329.png" /></a>
						</dt>
						<dd class="desc">
							<a href="#" >优资莱 绿茶籽精华滋养精华</a>
						</dd>
						<dd class="price clearfix">
							<em>349.00</em> <span>最新成交4616笔</span>
						</dd>
						<dd class="service"></dd>
					</dl>
					<dl class="float-left">
						<dt>
							<a href="#" ><img width="160" height="160"
								src="<%=basePath%>/mallstyle/picture/small_201607121431148121.jpg" /></a>
						</dt>
						<dd class="desc">
							<a href="#" >优资莱 无瑕净白柔肤水</a>
						</dd>
						<dd class="price clearfix">
							<em>349.00</em> <span>最新成交2827笔</span>
						</dd>
						<dd class="service"></dd>
					</dl>
				</div>
			</div>
		</div>
	</div>
	<div class="clear"></div>

	<%@include file="../../../bottom.jsp"%>
	<script>
	$(function (){
		addDec();
		showTotal();
		function addDec(){
			$(".addImg").click (function(){
				var id = $(this).attr("id").substring(3, 32);
				var quantity = $("#" + id + "Count").val();
				sendUpdateQuantity(id,Number(quantity)+1);
				});
			$(".decImg").click (function(){
				var id = $(this).attr("id").substring(3, 32);
				var quantity = $("#" + id + "Count").val();
				if(quantity == 1) {
					if(confirm("您是否真要删除该条目？")) {
						location = "<%=path%>/rest/cart/deleteThis?carid="+id;
						}
					} else {
						sendUpdateQuantity(id,Number(quantity)-1);
						}
				})
				}
		// 请求服务器，修改数量。
		function sendUpdateQuantity(id, count) {
			$.ajax({
				url:"<%=path%>/rest/cart/UpdateCount?cartId="+id+"&count="+count,
		        contentType:"application/json;charset=UTF-8",
		        dataType:"json",
		        type:"post", 
		        async:true,
		        success:function(result){
		        	//1.修改数量
		        	$("#" + id + "Count").val(result.count)
		        	//2.修改小计
		        	$("#" + id + "subtotal").text(result.price);
		        	showTotal();
		        	},
		        	error:function(result){
		        		alert("错误！");
		        		}
		        	});
			}
		});
	$(":checkbox[name=checkboxBtn]").click(function() {
		var all = $(":checkbox[name=checkboxBtn]").length;//所有条目的个数
		var select = $(":checkbox[name=checkboxBtn][checked=true]").length;//获取所有被选择条目的个数
		showTotal();//重新计算总计
	});
	function showTotal() {
		var total = 0;
		/*
		1. 获取所有的被勾选的条目复选框！循环遍历之
		*/
		$(":checkbox[name=checkboxBtn][checked=true]").each(function() {
			//2. 获取复选框的值，即其他元素的前缀
			var id = $(this).val();
			//3. 再通过前缀找到小计元素，获取其文本
			var text = $("#" + id + "subtotal").text();
			//4. 累加计算
			total += Number(text);
		});
		// 5. 把总计显示在总计元素上
		$("#allPrice").text(total);//round()函数的作用是把total保留2位
	}
	function jiesuan() {
		// 1. 获取所有被选择的条目的id，放到数组中
		var cartItemIdArray = new Array();
		$(":checkbox[name=checkboxBtn][checked=true]").each(function() {
			cartItemIdArray.push($(this).val());//把复选框的值添加到数组中
		});	
		// 2. 把数组的值toString()，然后赋给表单的cartItemIds这个hidden
		$("#cartItemIds").val(cartItemIdArray.toString());
		// 把总计的值，也保存到表单中
		$("#hiddenTotal").val($("#allPrice").text());
		// 3. 提交这个表单
		$("#jieSuanForm").submit();
	}
</script>
</body>
</html>